<template>
  <div class="login">
    <!-- 登录表单 -->
    <van-form v-if="isShowReg"
      ref="loginForm">
      <!-- 用户名 -->
      <van-field name="mobile"
        placeholder="请输入手机号"
        type="number"
        maxlength="11"
        clearable
        v-model="user.mobile"
        :rules="userFormRules.mobile">
        <!-- 自定义图标 -->
        <i slot="left-icon"
          class="iconfont icon-zhanghao"></i>
      </van-field>
      <!-- 昵称 -->

      <!-- 密码 -->
      <van-field v-model="user.password"
        type="password"
        name="password"
        maxlength="11"
        placeholder="请输入密码"
        :rules="userFormRules.password">
        <!-- 自定义图标 -->
        <i slot="left-icon"
          class="iconfont icon-mima"></i>
      </van-field>

       <!-- 登录 -->
    <div class="login-btn-wrap">
      <van-button class="login-btn"
        type="default"
        size="large"
        @click="onLogin"
        native-type="submit">登录</van-button>
      <van-button class="login-btn"
        type="default"
         size="large"
        @click="onRegister"
        native-type="submit">注册</van-button>
    </div>
    </van-form>
    <!-- 注册组件 -->
    <!-- <register v-else @close="closePop" @islogin="isShowReg=true"></register> -->

  </div>
</template>

<script>

// import register from './my/register.vue'

export default {
  // components: { register },
  name: 'Login',
  props: {
    isLogin: Boolean
  },
  data () {
    return {
      isShowReg: true, // 控制登录和注册的状态
      // 表单数据
      user: {
        mobile: '18250123227', // 手机号
        password: 'lanhui99' // 密码
      },
      // 表单验证规则
      userFormRules: {
        mobile: [{ required: true, message: '手机号不能为空' }, {
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: '手机号格式错误'
        }],

        password: [{ required: true, message: '密码不能为空' }, {
          pattern: /^[a-zA-Z]\w{5,17}$/,
          message: '密码格式错误'
        }]
      }

    }
  },

  async created () {

  },
  computed: {

  },
  methods: {
    closePop () {
      console.log('注册成功')
      this.$emit('close')
    },
    // 登录
    async onLogin () {
      // 1. 获取表单数据
      // TODO: 2. 表单验证
      // 检测手机号是否注册

      // loading 转圈圈提示
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0 // 持续展示 toast
      })

      // 3. 提交表单请求登录
      try {
        const { data: res } = await this.$http.get('/login/cellphone', {
          params: {
            phone: this.user.mobile,
            password: this.user.password
          }
        })
        console.log(res)
        if (res.code === 502) {
          return this.$toast.fail('账号或密码错误请重试!')
        }
        this.$store.commit('setUser', res)

        this.$toast.success('登录成功')
        // 登录成功，跳转到原来的页面

        this.$emit('close')
      } catch (err) {
        console.log(err.response)
        if (err.response.data.code === 400) {
          this.$toast.fail('登录失败，手机号或密码错误')
        } else if (err.response.status === 501) {
          this.$toast.fail('账号不存在，请先注册!')
        } else if (err.response.code === 502) {
          this.$toast.fail('账号或密码错误请重试!')
        }
        if (err.response.data.code === 509) {
          this.$toast.fail('密码错误超过限制,请等一会再来吧')
        }
      }
    },

    onRegister () {
      console.log('注册')
      this.$router.push('/register')
    }
  }
}

</script>

<style lang="less" scoped>
.login{
  margin: 50px 10px;
  .iconfont{
    font-size: 22px;
  }
   .send-sms-btn {
    // width: 152px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
   .login-btn-wrap {
    // padding: 53px 33px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .login-btn {
      background-color: #6db4fb;
      border: none;
    }
  }
}
</style>
